<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的基本使用</title>
    <script src="js/axios.min.js" type="text/javascript"></script>
</head>
<body>
<button id="btn1">点我获取所有人</button>
<br><br>
<input id="person_id" type="text" placeholder="请输入查找人的id">
<button id="btn2">点我获取某个人</button>
<br><br>
<input type="text" id="person_name" placeholder="请输入姓名">
<input type="text" id="person_age" placeholder="请输入年龄">
<button id="btn3">添加一个人</button>
<br><br>
<input type="text" id="person_update_id" placeholder="请输入修改人的id">
<input type="text" id="person_update_name" placeholder="请输入姓名">
<input type="text" id="person_update_age" placeholder="请输入年龄">
<button id="btn4">修改一个人</button>
<br><br>
<input type="text" id="person_delete_id" placeholder="请输入删除人的id">
<button id="btn5">删除一个人</button>

<!--
    1. axios 调用的返回值是 Promise 实例
    2. 成功的值叫 response，失败的值叫 error
    3. axios 成功的值是一个 axios 封装的 response 对象，服务器返回的真正数据在 response.data 中
    4. 携带 query 参数时，编写的配置项叫做 params
    5. 携带 params 参数时，只能在地址中拼 url （模板字符串）

 -->
<script type="text/javascript">
    // 获取按钮
    const btn1 = document.getElementById('btn1')
    const btn2 = document.getElementById('btn2')
    const personID = document.getElementById('person_id')
    const btn3 = document.getElementById('btn3')
    const personName = document.getElementById('person_name')
    const personAge = document.getElementById('person_age')
    const btn4 = document.getElementById('btn4')
    const personUpdateID = document.getElementById('person_update_id')
    const personUpdateName = document.getElementById('person_update_name')
    const personUpdateAge = document.getElementById('person_update_age')
    const btn5 = document.getElementById('btn5')
    const personDeleteID = document.getElementById('person_delete_id')

    // 获取所有人 --- 发送 GET 请求 --- 不携带参数
    btn1.onclick = () => {
        // 完整版
        /*
        axios({ // 传入配置对象
            url: 'http://localhost:5000/persons', // 请求地址
            method: 'GET', // 请求方式
        }).then(
            response => {
                console.log('请求成功了', response)
            },
            error => {
                console.log('请求失败了', error)
            }
        )
         */

        // 精简版
        axios.get('http://localhost:5000/persons').then(
            response => {
                console.log('请求成功了', response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )
    }

    // 获取某个人 --- 发送 GET 请求 --- 携带 query 参数
    btn2.onclick = () => {
        // 完整版
        /*
        axios({
            url: 'http://localhost:5000/person',
            method: 'GET',
            params: {id: personID.value} // 此处写的是 params，但携带的是 query 参数
        }).then(
            response => {
                console.log('请求成功了', response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )

         */

        // 精简版
        axios.get('http://localhost:5000/person', {params: {id: personID.value}}).then(
            response => {
                console.log('请求成功了', response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )
    }

    // 添加一个人 --- 发送 POST 请求 --- 携带 json 编码 或 urlencoded 编码
    btn3.onclick = () => {
        // 完整版
        /*
        axios({
            url: 'http://localhost:5000/person',
            method: 'POST',
            // data: {age: personAge.value, name: personName.value} // 携带请求体参数（json 编码）
            data: `name=${personName.value}&age=${personAge.value}`
        }).then(
            response => {
                console.log("请求成功了", response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )

         */

        // 精简版 json 编码
        /*
        axios.post('http://localhost:5000/person', {age: personAge.value, name: personName.value}).then(
            response => {
                console.log("请求成功了", response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )

         */

        // urlencoded 编码
        axios.post('http://localhost:5000/person', `name=${personName.value}&age=${personAge.value}`).then(
            response => {
                console.log("请求成功了", response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )
    }

    // 更新一个人 --- 发送 PUT 请求 --- 携带 json 编码参数 或 urlencoded 编码
    btn4.onclick = () => {
        // 完整版
        /*
        axios({
            url: 'http://localhost:5000/person',
            method: 'PUT',
            data: {
                id: personUpdateID.value,
                name: personUpdateName.value,
                age: personUpdateAge.value
            }
        }).then(
            response => {
                console.log('请求成功了', response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )

         */

        // 精简版
        axios.put('http://localhost:5000/person', {
            id: personUpdateID.value,
            name: personUpdateName.value,
            age: personUpdateAge.value
        }).then(
            response => {
                console.log('请求成功了', response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )
    }

    // 删除一个人 --- 发送 DELETE 请求 --- 携带 params 参数
    btn5.onclick = () => {
        // 完整版
        /*
        axios({
            url: `http://localhost:5000/person/${personDeleteID.value}`,
            method: 'DELETE',
        }).then(
            response => {
                console.log('请求成功了', response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )

         */

        // 精简版
        axios.delete(`http://localhost:5000/person/${personDeleteID.value}`).then(
            response => {
                console.log('请求成功了', response.data)
            },
            error => {
                console.log('请求失败了', error)
            }
        )
    }
</script>
</body>
</html>
